<template>
	<view class="warp">
		<view class="tip">根据您的评估报告，系统为您统计出如下信息，请您确认信息务必真实，以确保运动处方的安全;</view>
		<!-- 基本信息 -->
		<view class="title u-border-bottom">
			<view>基本信息</view>
		</view>
		<view class="infoBox">
			<view class="flex">
				<view>年龄</view>
				<u--input border="none" type="number" v-model="form.userInfo.age" placeholder="--" />
			</view>
			<view class="flex">
				<view>性别</view>
				<view @click="handlePicker('sex', 'userInfo.sex')">
				  {{ fieldData.sex[form.userInfo.sex] || '--' }}
				</view>
			</view>
			<view class="flex">
				<view>身高</view>
				<u--input border="none" type="number" v-model="form.userInfo.height" placeholder="--" />
			</view>
			<view class="flex">
				<view>体重</view>
				<u--input border="none" type="number" v-model="form.userInfo.weight" placeholder="--" />
			</view>
			<view class="flex">
				<view>体脂率</view>
				<u--input border="none" type="number" v-model="form.userInfo.fatRate" placeholder="--" />
			</view>
			<view class="flex">
				<view>肌肉率</view>
				<u--input border="none" type="number" v-model="form.userInfo.waistline" placeholder="--" />
			</view>
			<view class="flex">
				<view>BMI</view>
				<u--input border="none" type="number" v-model="form.userInfo.bmi" placeholder="--" />
			</view>
			<view class="flex">
				<view>腰围</view>
				<u--input border="none" type="number" v-model="form.userInfo.muscleRate" placeholder="--" />
			</view>
			<view class="flex">
				<view>安静心率</view>
				<u--input border="none" type="number" v-model="form.userInfo.rhr" placeholder="--" />
			</view>
			<view class="flex">
				<view>心肺运动风险</view>
				<view @click="handlePicker('risk', 'userInfo.heartLungRisk')">
					{{ fieldData.risk[form.userInfo.heartLungRisk] || '--' }}
				</view>
			</view>
			<view class="flex" style="width: 74%;">
				<view style="width: 29.1%;">心肺耐力值</view>
				<u--input border="none" type="number" v-model="form.userInfo.V02Max" placeholder="--" />
				<view @click="handlePicker('level', 'userInfo.V02MaxScore')" style="margin-left: 5rpx;">
					{{ fieldData.level[form.userInfo.V02MaxScore] || '--' }}
				</view>
			</view>
		</view>
		<!-- 躯体运动风险 -->
		<view class="title u-border-bottom">
			<view>躯体运动风险</view>
		</view>
		<view class="infoBox">
			<view class="flex">
				<view>平衡能力</view>
				<view @click="handlePicker('level', 'physicalRisk.balance')">
					{{ fieldData.level[form.physicalRisk.balance] || '--' }}
				</view>
			</view>
			<view class="flex">
				<view>肺活量</view>
				<view @click="handlePicker('level', 'physicalRisk.lungCapacity')">
					{{ fieldData.level[form.physicalRisk.lungCapacity] || '--' }}
				</view>
			</view>
			<view class="flex">
				<view>敏捷能力</view>
				<view @click="handlePicker('level', 'physicalRisk.agility')">
					{{ fieldData.level[form.physicalRisk.agility] || '--' }}
				</view>
			</view>
			<view class="flex">
				<view>圆肩驼背</view>
				<view @click="handlePicker('risk', 'physicalRisk.roundShoulder')">
					{{ fieldData.risk[form.physicalRisk.roundShoulder] || '--' }}
				</view>
			</view>
			<view class="flex">
				<view>头前引</view>
				<view @click="handlePicker('risk', 'physicalRisk.headFrontArc')">
					{{ fieldData.risk[form.physicalRisk.headFrontArc] || '--' }}
				</view>
			</view>
			<view class="flex">
				<view>骨盆风险</view>
				<view @click="handlePicker('pelvis', 'physicalRisk.boneDysfunctionRisk')">
					{{ fieldData.pelvis[form.physicalRisk.boneDysfunctionRisk] || '--' }}
				</view>
			</view>
			<view class="flex">
				<view>下肢柔韧性</view>
				<view @click="handlePicker('level', 'physicalRisk.subscapularFlexibility')">
					{{ fieldData.level[form.physicalRisk.subscapularFlexibility] || '--' }}
				</view>
			</view>
			<view class="flex">
				<view>上肢柔韧性</view>
				<view @click="handlePicker('level', 'physicalRisk.upperArmFlexibility')">
					{{ fieldData.level[form.physicalRisk.upperArmFlexibility] || '--' }}
				</view>
			</view>
			<view class="flex">
				<view>肌力</view>
				<view @click="handlePicker('level', 'physicalRisk.strength')">
					{{ fieldData.level[form.physicalRisk.strength] || '--' }}
				</view>
			</view>
		</view>
		<!-- 慢病风险 -->
		<view class="title u-border-bottom">
			<view>慢病风险</view>
		</view>
		<view class="infoBox">
			<view class="flex">
				<view>收缩压</view>
				<view @click="handlePicker('pressure', 'diseaseRisk.systolicPressure')">
					{{ fieldData.pressure[form.diseaseRisk.systolicPressure] || '--' }}
				</view>
			</view>
			<view class="flex">
				<view>舒张压</view>
				<view @click="handlePicker('pressure', 'diseaseRisk.diastolicPressure')">
					{{ fieldData.pressure[form.diseaseRisk.diastolicPressure] || '--' }}
				</view>
			</view>
			<view class="flex">
				<view>尿酸</view>
				<view @click="handlePicker('extent', 'diseaseRisk.uricAcid')">
					{{ fieldData.extent[form.diseaseRisk.uricAcid] || '--' }}
				</view>
			</view>
			<view class="flex">
				<view>肿瘤风险</view>
				<view @click="handlePicker('risk', 'diseaseRisk.tumorRisk')">
					{{ fieldData.risk[form.diseaseRisk.tumorRisk] || '--' }}
				</view>
			</view>
			<view class="flex">
				<view>骨质疏松</view>
				<view @click="handlePicker('judge', 'diseaseRisk.boneDysfunction')">
					{{ fieldData.judge[form.diseaseRisk.boneDysfunction] || '--' }}
				</view>
			</view>
			<view class="flex">
				<view>焦虑症</view>
				<view @click="handlePicker('judge', 'diseaseRisk.anxiety')">
				  {{ fieldData.judge[form.diseaseRisk.anxiety] || '--' }}
				</view>
			</view>
			<view class="flex">
				<view>心血管风险</view>
				<view @click="handlePicker('risk', 'diseaseRisk.cardiovascularRisk')">
				  {{ fieldData.risk[form.diseaseRisk.cardiovascularRisk] || '--' }}
				</view>
			</view>
			<view class="flex">
				<view>血糖</view>
				<view @click="handlePicker('extent', 'diseaseRisk.bloodSugar')">
					{{ fieldData.extent[form.diseaseRisk.bloodSugar] || '--' }}
				</view>
			</view>
			<view class="flex">
				<view>血脂</view>
				<view @click="handlePicker('extent', 'diseaseRisk.cholesterol')">
					{{ fieldData.extent[form.diseaseRisk.cholesterol] || '--' }}
				</view>
			</view>
		</view>
		<!-- 其他 -->
		<view class="title u-border-bottom">
			<view>其他</view>
		</view>
		<view class="infoBox">
			<view class="flex">
				<view>更年期/绝经</view>
				<view @click="handlePicker('judge', 'other.menarche')">
					{{ fieldData.judge[form.other.menarche] || '--' }}
				</view>
			</view>
			<view class="flex">
				<view>孕/产</view>
				<view @click="handlePicker('judge', 'other.pregnancy')">
					{{ fieldData.judge[form.other.pregnancy] || '--' }}
				</view>
			</view>
			<view class="flex">
				<view>选择目标周期</view>
				<view @click="handlePicker('cycle', 'other.targetCycle')">
					{{ fieldData.cycle[form.other.targetCycle] || '--' }}
				</view>
			</view>
			<view class="textarea">
				<u--textarea
					placeholder="自我手工补充:主要从补充信息里来获取关节损伤的关键字，比如半月板，韧带损伤，肩关节损伤等字眼，系统会自动匹配相关的运动处方。"
					v-model="form.other.supplementInfo"
					maxlength="-1"
					height="120rpx"
				/>
			</view>
		</view>
		<!-- 提交按钮 -->
		<view class="btn" @click="confirmFun">运动处方申请信息提交按钮</view>
		<!-- 选择器 -->
		<u-picker :show="pickerShow" :columns="[columns.lable]" @confirm="pickerConfirm" ref="uPicker" @cancel="pickerShow = false" />
	</view>
</template>

<script>
	import { getPrescription, applyPrescription } from '@/api/prescription.js';
	export default {
		data() {
			return {
				sign: '',
				form: {},
				pickerShow: false,
				columns: {},
				curPickerName: [],
				fieldData: {
					sex: {1: '男', 2: '女'},
					risk: {high: '高风险', low: '低风险'},
					pelvis: {anterior_tilt: '前倾', posterior_tilt: '后倾', normal: '正常'},
					level: {poor: '差', below_average: '较差', average: '合格', good: '良好', excellent: '优秀'},
					pressure: {normal: '正常', high_normal: '正常高值', hypertension_1: '一级高血压', hypertension_2: '二级高血压', hypertension_3: '三级高血压'},
					judge: {no: '否', yes: '是'},
					cycle: {one_month: '1个月', three_month: '3个月', six_month: '6个月'},
					extent: {normal: '正常', low: '偏低', high: '偏高'}
				}
			}
		},
		onLoad(eve) {
			this.sign = eve.storeId
			getPrescription().then(res => this.form = res.data)
		},
		methods: {
			// 展开选择器
			handlePicker(type, field) {
				let lable = [], value = [];
				for(let k in this.fieldData[type]) {
					lable.push(this.fieldData[type][k])
					value.push(k)
				}
				this.columns = {lable, value}
				// 记录当前操作框
				const fieldArr = field.split('.')
				this.curPickerName = fieldArr
				// 选择设置默认选项
				const val = this.form[fieldArr[0]][fieldArr[1]]
				const index = value.indexOf(val)
				this.$nextTick(() => {
					this.$refs.uPicker.setIndexs([index == -1 ? 0 : index])
					this.pickerShow = true
				})
			},
			// 选择器选择
			pickerConfirm(e) {
				const index = e.indexs[0]
				this.form[this.curPickerName[0]][this.curPickerName[1]] = this.columns.value[index]
				this.pickerShow = false
			},
			// 提交信息
			confirmFun() {
				const parameter = {
					sign: this.sign,
					form_json: this.form
				}
				applyPrescription(parameter).then(res => uni.navigateBack())
			}
		}
	}
</script>

<style lang="scss" scoped>
.warp {
	padding: 30rpx;
	background: #fff;
	margin-top: 20rpx;
}
.infoBox {
	display: flex;
	font-size: 24rpx;
	text-align: center;
	flex-wrap: wrap;
	justify-content: space-between;
	/deep/ .flex {
		background: #d9d9d9;
		width: calc(50% - 13rpx);
		padding: 5rpx;
		margin-bottom: 30rpx;
		.u-input {
			border-radius: 0;
			&__content__field-wrapper__field {
				text-align: center !important;
			}
		}
		.input-placeholder {
			color: #000;
		}
		.u-input, > view:last-child {
			background: #fff;
			flex: 1;
			height: 48rpx;
			line-height: 48rpx;
		}
		> view:first-child {
			width: 45%;
		}
	}
}
.tip {
	font-size: 26rpx;
	color: #666;
}
.title {
	font-weight: bold;
	margin-bottom: 30rpx;
	view {
		border-bottom: 4rpx solid #fe5e10;
		width: fit-content;
		padding: 30rpx 0 10rpx 0;
		font-size: 30rpx;
		color: #fe5e10;
	}
}
.textarea {
	width: 100%;
	margin-bottom: 30rpx;
	text-align: left;
}
.btn {
	color: #fff;
	background: #fe5e10;
	height: 80rpx;
	line-height: 80rpx;
	border-radius: 40rpx;
	text-align: center;
}
</style>